<route lang="json5">
{
  style: {
    navigationBarTitleText: "我的",
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <view class="p-3">
    <view class="w-full flex items-center mb-5" @click="showLoginModal">
      <image
        v-if="PageData.userInfo.headimgurl"
        class="w-[120rpx] h-[120rpx] rounded-full"
        :src="PageData.userInfo.headimgurl"
        mode="widthFix"
      />
      <image
        v-else
        class="w-[120rpx] h-[120rpx] rounded-full"
        src="https://qncdn.mopic.mozigu.net/work/143/24/4f2b263d7a6140f2/person.png"
        mode="widthFix"
      />
      <view class="text-gray ml-2">{{ PageData.userInfo.nickname || "微信用户" }}</view>
    </view>
    <view class="task-list">
      <view
        class="task-item"
        v-for="(item, index) in pageData.taskList"
        :key="index"
        @click="lookDetail(item)"
      >
        <view class="img">
          <image :src="item?.image_url || item?.role_cover" mode="widthFix" />
          <view class="popup" v-if="item.status !== 'SUCCESSED'">
            <view class="status">{{ statusMap[item.status] }}</view>
          </view>
          <view class="info" v-if="item.elapsed_time">
            <view>{{ formatSeconds(item.elapsed_time || 0) }}</view>
          </view>
        </view>
        <view class="desc">{{ item.caption }}</view>
      </view>
      <view
        v-if="pageData.taskList.length === 0"
        class="w-full min-h-[500rpx] text-gray text-center flex items-center justify-center"
      >
        暂无更多数据
      </view>
    </view>
    <!-- <TaskList /> -->
    <LoginModal
      ref="loginModalRef"
      @close="PageData.showLoginModal = false"
      @submit="setUserInfo"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
// import TaskList from '@/components/task-list.vue'
import LoginModal from "@/components/login-modal.vue"
import { useUserStore } from "@/store"
import { getTaskList } from "@/service/index"

const loginModalRef = ref(null)
const userStore = useUserStore()

const PageData = reactive({
  showLoginModal: false,
  userInfo: {
    ...userStore.getUserInfo(),
  },
})

function setUserInfo(evt) {
  userStore.updateUserInfo("nickname", evt?.nickname)
  userStore.updateUserInfo("headimgurl", evt?.avatar)
  PageData.userInfo = {
    ...userStore.getUserInfo(),
    nickname: evt.nickname,
    headimgurl: evt.avatar,
  }
}

function showLoginModal() {
  loginModalRef.value.show()
}

const pageData = reactive({
  taskList: [],
})

const statusMap = {
  PENDING: "待处理...",
  SUCCESSED: "已完成",
  RUNNING: "进行中...",
  FAILED: "失败",
}

function lookDetail(taskItem) {
  if (taskItem.status !== "SUCCESSED") {
    uni.showToast({
      title: taskItem.status === "FAILED" ? "任务失败，无法查看" : "任务未完成，无法查看",
      icon: "none",
    })
    return
  }
  uni.navigateTo({
    url: `/pages/task-detail/task-detail?src=${taskItem.video_url}&url=${taskItem.image_url}&id=${taskItem.role_id}`,
  })
}

function formatSeconds(seconds) {
  if (seconds < 60) {
    return `${seconds}s`
  } else {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    const formattedMinutes = minutes < 10 ? String(minutes) : String(minutes).padStart(2, "0")
    const formattedSeconds = String(remainingSeconds).padStart(2, "0")
    return `${formattedMinutes}:${formattedSeconds}`
  }
}

onShow(() => {
  //   uni.showLoading({
  //     title: '加载中',
  //     mask: true,
  //   })
  uni.showNavigationBarLoading()
  getTaskList()
    .then((res: any) => {
      pageData.taskList = res.data.records
    })
    .finally(() => {
      uni.hideLoading()
      uni.hideNavigationBarLoading()
    })
})

onPullDownRefresh(() => {
  uni.showNavigationBarLoading()
  getTaskList()
    .then((res: any) => {
      pageData.taskList = res.data.records
    })
    .finally(() => {
      uni.hideLoading()
      uni.hideNavigationBarLoading()
      uni.stopPullDownRefresh()
    })
})
</script>

<style lang="scss" scoped>
.task-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.task-item {
  width: 340rpx;
  margin-bottom: 15rpx;
  overflow: hidden;
}
.task-item .img {
  width: 340rpx;
  height: 340rpx;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.task-item .img image {
  width: 100%;
}
.task-item .img .popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.task-item .desc {
  padding: 10rpx;
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 28px;
}
.task-item .info {
  position: absolute;
  top: 2px;
  right: 6px;
  color: #fff;
  font-weight: normal;
  text-shadow: #000000 1px 1px 1px;
}
</style>
